import * as echarts from "echarts";
// let showIndex = '';
// function debounce(fn, delay) {
//     let timer = null;
//     return (...args) => {
//         if (timer) clearTimeout(timer);
//         timer = setTimeout(() => {
//             fn.apply(this, args);
//         }, delay);
//     };
// }
// window.onresize = debounce(function() {
//     console.log(111);
// }, 500);
export const sunrainOption = {
    legend: {},
    tooltip: {
        trigger: 'axis',
        backgroundColor: 'rgba(255,255,255,0.8)',
        axisPointer: {
            type: 'shadow',
            shadowStyle: {
                color: 'rgba(150,150,150,0.3)'
            }
        },
        transitionDuration: 0.5,
        formatter(obj) {
            setTimeout(function() {
                stockPieManagement("ebox", sunrainOption.series[0].data1[obj[0].dataIndex], sunrainOption.xAxis.data1[obj[0].dataIndex]);
            }, 500)
            return `<div style="padding-bottom: 2px;color:rgba(0, 0, 0, 1);font-weight: bold;">${obj[0].name}</div><div id="ebox" style="width:400px; height:200px;" class="ebox"></div>`
        }
    },
    grid: {
        left: '4%',
        right: '4%',
        bottom: '10%',
        top: '7%',
        textStyle: {
            color: '#fff'
        }
    },
    xAxis: {
        type: 'category',
        data: ['管理期货（CTA）', '统计套利', '指数增强', '中性策略', '股票策略 ', '期权策略', '复合策略'],
        axisLabel: {
            textStyle: {
                fontSize: '14',
                lineHeight: 30,
                color: "#333",
                fontWeight: 'bold'
            },
        },
    },
    yAxis: [{
        type: 'value',
        show: true,
        axisLine: {
            show: true,
        },
        axisLabel: {
            formatter: '{value} %'
        }
    }],
    series: [{
        data: [10, 52, -20, 34, -30, 33, 20],
        data1: [1, 3, 4, 5, 6],
        type: 'bar',
        barWidth: '60%',
        label: {
            show: true,
            fontSize: '16px',
            // color: "# fff ",
            position: 'top',
            formatter: (value) => {
                return value.data + '%'
            }
        },
        itemStyle: {
            normal: {
                color: function(params) {
                    var colorList = [{
                            type: "linear",
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                    offset: 0,
                                    color: "#FF8268", // 0% 处的颜色
                                },
                                {
                                    offset: 1,
                                    color: "#FB5D35", // 100% 处的颜色
                                },
                            ],
                            global: false, // 缺省为 false
                        },
                        {
                            type: "linear",
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                    offset: 0,
                                    color: "#4480FA", // 0% 处的颜色
                                },
                                {
                                    offset: 1,
                                    color: "#73B1FF", // 100% 处的颜色
                                },
                            ],
                            global: false, // 缺省为 false
                        },
                    ];
                    if (params.data < 0) {
                        return colorList[1];
                    }
                    return colorList[0];
                },
            },
        },

    }]
}
export const sunrainOption1 = {
    legend: {},
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow',
            shadowStyle: {
                color: 'rgba(150,150,150,0.3)'
            }
        },
        formatter(params) {
            let str = ''
            str += `<div style="padding-bottom: 2px;color:rgba(0, 0, 0, 0.45)">${params[0].name}</div>`
            console.log(params[0].data)
            for (let i = 1; i < params[0].data.length; i++) {
                let textColor = '';
                if (params[0].data[i] < 0) {
                    textColor = 'color:#389E0D'
                } else {
                    textColor = 'color:#D9363E'
                }
                str += `<div style="display: flex;align-items: center;margin-top:5px;">
                    ${params[0].marker} 
                    <span style="flex:1;font-weight: bold;margin-left:5px;margin-right:20px;">${params[0].seriesName}</span>
                    <span style="margin-left: 10px;font-weight: bold;${textColor}"> ${params[0].data[i]}%</span>
                    </div>`
            }
            return str
        }
    },
    dataset: {
        source: [
            ['product', '趋势追踪', '均线回归', '期限结构', '高频交易 '],
            ['管理期货(CTA)', 10, 30, 65, 53, 41, 40, 41],
            ['统计套利', 21, 30, 65, 53, 41, 40, 41],
            ['指数增强', 31, 30, 65, 53, 41, 40, 41],
            ['中性策略', 41, 30, 65, 53, 41, 40, 41],
            ['股票策略', 51, 30, 65, 53, 41, 40, 41],
            ['期权策略', 61, 30, 65, 53, 41, 40, 41],
            ['复合策略', 71, 30, 65, 53, 41, 40, 41],
        ]
    },
    xAxis: [{
        type: 'category',
        gridIndex: 0,
        data: ['管理期货(CTA)', '统计套利', '指数增强', '中性策略', '股票策略 ', '期权策略', '复合策略'],
    }],
    yAxis: [
        { gridIndex: 0 },
    ],
    grid: [
        { bottom: '8%', left: '1%', right: '0' },
    ],
    series: [{
            type: 'bar',
            seriesLayoutBy: 'row',
            label: {
                show: true,
                fontSize: '16px',
                color: "#fff",
                position: 'inside',
                formatter: (value) => {
                    return value.data[1] + '%'
                }
            },
            itemStyle: {
                normal: {
                    color: function(params) {
                        var colorList = [{
                                type: "linear",
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                        offset: 0,
                                        color: "#FF8268", // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: "#FB5D35", // 100% 处的颜色
                                    },
                                ],
                                global: false, // 缺省为 false
                            },
                            {
                                type: "linear",
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                        offset: 0,
                                        color: "#4480FA", // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: "#73B1FF", // 100% 处的颜色
                                    },
                                ],
                                global: false, // 缺省为 false
                            },
                        ];
                        if (params.data[1] < 0) {
                            return colorList[1];
                        }
                        return colorList[0];
                    },
                },
            },
        },

    ]
}
export const sunrainOption2 = {
    // animation: false,
    grid: {
        left: '12%',
        right: '10%',
        bottom: '10%',
        top: '10%',
        textStyle: {
            color: '#fff'
        }
    },
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        axisLabel: {
            interval: 0,
        },
    },
    yAxis: {
        type: 'value',
        axisLine: {
            show: true,
        },
        axisLabel: {
            formatter: '{value} %'
        }
    },
    series: [{
        name: '管理期货（CTA）',
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar',
        barWidth: '60%',
        label: {
            show: true,
            position: 'top',
            // color: '#fff',
            formatter: (value) => {
                return value.data + '%'
            }
        },
        itemStyle: {
            normal: {
                color: function(params) {
                    var colorList = [{
                            type: "linear",
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                    offset: 0,
                                    color: "#FF8268", // 0% 处的颜色
                                },
                                {
                                    offset: 1,
                                    color: "#FB5D35", // 100% 处的颜色
                                },
                            ],
                            global: false, // 缺省为 false
                        },
                        {
                            type: "linear",
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                    offset: 0,
                                    color: "#4480FA", // 0% 处的颜色
                                },
                                {
                                    offset: 1,
                                    color: "#73B1FF", // 100% 处的颜色
                                },
                            ],
                            global: false, // 缺省为 false
                        },
                    ];
                    if (params.data < 0) {
                        return colorList[1];
                    }
                    return colorList[0];
                },
            },
        },
    }]
}

function stockPieManagement(id, data, dataName) {
    const chart = echarts.init(document.getElementById(id));
    sunrainOption2.xAxis.data = dataName;
    sunrainOption2.series[0].data = data;
    chart.setOption(sunrainOption2)
}